<template>
  <div class="home">
    <div class="login"><a href="/#/mlogin" class="login" v-if="!isLogint">登录</a></div>
    <div class="login"><a @click="logout" class="login" v-if="isLogint">注销</a></div>
    <h1 class="title">邮说</h1>
    <div class="input">
      <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable
          @change="searchBlog(1)">
      </el-input>
    </div>


    <div class="meta">
      <!--之前的分类标签不好 这里重写-->
      <!--动态性地生成标签-->
      <el-checkbox-group class="checkbox" v-model="metasFromFront" @change="classify">
        <el-checkbox
            v-for="(item, index) in metasFromBack"
            :key="index"
            :label="item.label"
        >{{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <el-card v-for="blog in blogs" class="blog" @click.native="toDetail(blog.id)">
      <div class="incard">
        <div class="first">
          <h4>{{ blog.title }}</h4>
          <div class="like">
            <van-badge :content="blog.likeCount" v-if="blog.likeCount>0" color="#409EFF">
              <van-icon size="30" name="good-job-o"/>
            </van-badge>
          </div>
        </div>
        <div class="userofblog">
          <el-avatar
              class="avator"
              :src="blog.avatar"
              size="small">
          </el-avatar>
          <h6>{{ blog.author }}</h6>
        </div>

        <p>{{ blog.description }}</p>
      </div>
    </el-card>

    <el-pagination
        class="mpage"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change=page>
    </el-pagination>
    <h3>你好啊</h3>

  </div>
</template>

<script>
import store from "../../store";

export default {
  name: "mindex",
  data() {
    return {
      input: '',
      blogs: {},
      recommendBlog: {},
      currentPage: 1,
      currentPage_s: 1,
      total: 0,
      pageSize: 6,

      isLogint: false,

      metasFromFront: [],  //前台选中发送给后端的

      metasFromBack: [],//从后台来的metas
    }
  },
  methods: {
    toDetail(bid) {
      this.$router.push('/mblog/' + bid)
    },
    isLogin() {
      const token = localStorage.getItem("token")
      const userinfo = store.getters.getUser;

      if (!userinfo) {
        //表明没有登陆了
        console.log('userinfo' + userinfo)
        this.isLogint = false
      } else {
        this.isLogint = true
      }
    },

    //分页功能 接收当前页数参数
    page(currentPage) {
      const _this = this
      _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        _this.blogs = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
        // window.scrollTo(0, 0);
      })
    },

    //搜索功能
    searchBlog(currentPage) {
      this.$axios.get("/searchBlog?searchContent=" + this.input + "&currentPage=" + currentPage).then(res => {
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        this.blogs = res.data.data.records
        this.currentPage = res.data.data.current
        this.total = res.data.data.total
        this.pageSize = res.data.data.size
        // window.scrollTo(0, 0);

        if (this.blogs.length === 0) {
          this.$notify({
            title: '没有该文章哦',
            message: this.$createElement('i', {style: 'color: teal'}, '要不发一篇这个标题的文章')
          });
        }
      })
    },
    //当然以前的分类方法扔掉
    classify() {
      //这里的传参很重要
      this.$axios.post("/queryBlogByMeta", {"metas": this.metasFromFront}).then(res => {
        // console.log("分类成功")
        this.blogs = res.data.data.records
        this.currentPage = res.data.data.current
        this.total = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    logout() {
      const _this = this
      _this.$axios.get("/logout", {
        headers: {"Authorization": localStorage.getItem("token")}
      }).then(res => {
        _this.$store.commit("REMOVE_INFO")
        // this.hasLogin = false
        // this.user.username = '请先登录'
        // this.avatar = ''
        _this.$router.push("/")
        // 这里有bug  我在blogs页面 logout 又push到/blog   Navigating to current location ("/blogs") is not allowed
        //解决办法： https://blog.csdn.net/weixin_43606809/article/details/103040805

        //发现图片不能刷新  手动
        location.reload();
      })
    },
  },


  created() {
    this.page(1)

    this.isLogin();

    //生成分类标签
    this.$axios.get("/getMetas").then(res => {

      var meta = {label: ''}
      var metas = new Array();

      for (var i = 0; i < res.data.data.count; i++) {
        //牛啊牛啊
        meta = {}   //必须要清空一次  //只用下面这一句不够
        meta.label = res.data.data.labels[i]
        metas[i] = meta
      }
      this.metasFromBack = metas
    })
  }
}
</script>

<style scoped>


.input {
  margin: auto;
  width: 60%;
  padding-bottom: 20px;

}

.title {
  color: #409EFF;
  /*相对定位 可实现移动*/
  text-align: center;
  margin-top: 0;

}

.blog {
  width: 90%;
  margin: auto;
  margin-bottom: 5px;
}

.incard h4 {
  /*float: left;*/
}

.incard span {
  /*text-align: right;*/
}

.incard .like {
  text-align: right;
  position: relative;
  bottom: 25px;
}

.mpage {
  margin-bottom: 60px;
  text-align: center;
}

h4 {
  padding: 0;
  margin: 0;
}

.first {
  height: 30px;
}

h3 {
  margin-top: 50px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 100px;
  color: #409EFF;
}

h6 {
  float: left;

  padding: 0;
  margin: 0;
  padding-top: 6px;
  padding-left: 5px;
  font-weight: bold;
}

.avator {
  float: left;
}

.userofblog {
  margin-top: 5px;
  margin-bottom: 30px;
}

p {
  position: relative;
  top: 20px;
  text-indent: -27px;
  font-size: small;
}

.login {
  text-align: right;
  margin-top: 2px;
  margin-right: 4px;
}

.login a {
  color: #a8a8a8;
  font-size: small;
  font-weight: normal;
}

.meta {
  width: 300px;

  /*text-align: center;*/
  margin: auto;
  margin-bottom: 30px;
}


.checkbox {
  position: relative;
  left: 35px;
}
</style>
